<template>
  <a-layout class="logincontent">
  <a-form :model="form" :style="{width:'600px'}" @submit="handleSubmit" id="registerForm" >
    <a-form-item field="name" label="用户名">
      <a-input v-model="form.name" placeholder="请设置用户名" />
    </a-form-item>
    <a-form-item field="password1" label="设置密码">
      <a-input-password v-model="form.password1" placeholder="请设置密码" />
    </a-form-item>
    <a-form-item field="password2" label="确认密码">
      <a-input-password v-model="form.password2" placeholder="请再次输入密码" />
    </a-form-item>
    <a-form-item field="email" label="验证邮箱" >
      <a-input v-model="form.email" placeholder="请输入邮箱" />
    </a-form-item>
    <a-form-item field="identify_code" label="验证码" >
      <a-input v-model="form.identify_code" placeholder="请输入验证码" />

      <a-button @click="getCode">{{myStr.code}}</a-button>
      <!--       <a-button @click="getCode"> <icon-email :style="{fontSize:'52px'}"/>点击发送验证码</a-button>>-->
    </a-form-item>
    <a-form-item field="isRead">
      <a-checkbox v-model="form.isRead">
        我已阅读须知
      </a-checkbox>
    </a-form-item>
    <a-form-item>
      <a-button html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
  </a-layout>
</template>

<script lang="ts">
import { reactive } from 'vue';
import { createApp } from 'vue'
import ArcoVue, { Message } from '@arco-design/web-vue';
// 额外引入图标库
import    ArcoVueIcon from '@arco-design/web-vue/es/icon';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';
import axios from "axios";
import {removeMyInterceptor} from "@/api/interceptor";
import router from '@/router';

export default {
  data(){
    return{
      teamID:''
    }
  },
  setup() {
    const form = reactive({
      name: '',
      password1: '',
      password2: '',
      email: '',
      identify_code: '',
      isRead: false,
    })
    const myStr = reactive({
      code:'点击发送验证码'
    })
    const handleSubmit = () => {
      if(form.name.length < 4)
      var that = this;
      console.log('----------');
      console.log(form.name);
      removeMyInterceptor();
      axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: 'user/register',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          userAccount: form.name,
          userPassword: form.password1,
          checkPassword: form.password2,
          email: form.email,
          code: form.identify_code
        })
      }).then(function (response) {
        console.log('请求成功');
        console.log(response);
        if (response.data.code === 0) {
          Message.success('注册成功！');
          router.go(-1);
        } else {
          console.log('注册失败');
          Message.error(response.data.description);
        }
      }).catch(function () {
        console.log('请求失败');
      });
    }

    function getCode() {
      console.log('点击发送验证码');
      /*myStr.code = '验证码已发送';*/
      console.log(form.email);
      removeMyInterceptor();
      axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: 'user/getEmailCode',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({      /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          email: form.email,
        })
      }).then(function (response) {
        console.log('请求成功');
        console.log(response);
        if (response.data.code === 0) {
          console.log('成功收到验证码');
          myStr.code = '验证码已发送';
        } else {
          console.log('请求验证码失败');
        }
      }).catch(function () {
        console.log('请求失败');
      });
    }

    return {
      form,
      myStr,
      handleSubmit,
      getCode
    }
  }
}
</script>

<style>
#registerForm{
  width: 300px;
  padding: 40px;  /* 内边界宽度  */
  position: absolute;  /* 设置为绝对定位，使下方的top和left生效  */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);  /* 作用见后方描述  */
  background: #627fce;  /* 设置背景颜色  */
  text-align: center;  /* 表单中内容居中  */
  border-radius: 10px;
  opacity: 0.85;
}

.logincontent {
  display: flex;
  flex-direction: column;
  background-image: url("/src/assets/images/p2.jpg");
  background-size: 100% 100%;
 /* background-attachment: fixed;*/

  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;

  justify-content: center;
  align-items: center;
}

</style>
